<template>
  <div class="nav flex flexAtcent flexJcent">
    <div class="nav-item flex flexAtcent">
      <div class="_li flex flexAtcent" v-for="(item, index) in navs" :key="index" :class="headIndex==index ? 'on' : ''" v-text="item" @click="navsClick(index)"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['headIndex'],
  data () {
    return {
      navs: ['首页', '南图概况', '通知公告', '动态新闻', '党建专题', '活动报名', '数字阅读', '新书推荐', '藏书查询', '数字推广工程']
    }
  },
  methods: {
    navsClick: function (e) {
      if (e === 0) {
        this.$router.push({
          path: '/'
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.nav {
  background: #65b743;
  .nav-item {
    height: 50px;
    width: 1180px;
    ._li {
      height: 100%;
      font-size: 16px;
      color: #ffffff;
      padding-left: 20px;
      padding-right: 20px;
      cursor: pointer;
      transition: background .5s;
      &:hover {
        background: #459428;
      }
      &.on {
        background: #459428;
      }
    }
  }
}
</style>
